<template>
  <!--  后台界面的标签组件-->
  <div class="tabs">
    <!-- closable是否可删除:除了"首页"都可删 -->
    <!-- effect:主题,当前主题是dark,其他是plain -->
    <el-tag v-for="(item, index) in tabData" :key="item.title" :closable="item.title !== '后台首页'"
            @click="changeMenu(item)"
            @close="handleClose(item, index)">
      {{ item.title }}
    </el-tag>
  </div>
</template>


<script>
import {mapState} from 'vuex'

export default {
  methods: {
    changeMenu(item) {
      //先判断跳转的路由是不是就是现在的路由，防止重复跳转
      if (this.$route.path === item.url) {
        console.log("不能跳转到相同的路由！！");
      }else {
        this.$store.commit('addTab', item)
        this.$router.push(item.url)
      }
    },
    handleClose(item, index) {
      // 删除面包屑数据
      this.$store.commit('delTab', item)
      // 如果删除的刚好是自己
      if (item.url === this.$route.path) {
        const length = this.tabData.length
        // 如果删除的是最后一个:跳到前一个
        if (length === index) {
          this.$router.push(this.tabData[index - 1].url)
        }
        // 不是最后一个:往后一个
        else {
          this.$router.push(this.tabData[index].url)
        }
      }
    }
  },
  computed: {
    //将面包屑数据列表中的数据放到该组件中的计算属性中,实时更新显示
    ...mapState({
      tabData: state => state.adminTab.tabList
    })
  }
}
</script>


<style scoped>

.tabs {
  padding: 20px 20px 0 20px;
  .el-tag {
    align-items: center;
    margin-right: 12px;
    cursor: pointer;
    background-color: #e0e0e0;
    color: #6cbe73;
    border-radius: 4px;
    transition: background-color 0.3s;
  }

  .el-tag:hover {
    background-color: #b6e56f;
  }
}
</style>
